<template>
	<view>
		<!-- 自定义导航栏 -->
		<CustomNavBar title="惠商城" @search-click="handleSearchClick" />
		<view class="header">
			<view class="header_left">
				<view class="header_avatar"></view>
			</view>
			<view class="header_right">
				<text>{{username}}</text>
				<text>{{individual}}</text>
				<button plain="true">修改个人信息>&nbsp;</button>
			</view>
		</view>

		<view class="mybody">
			<view class="orders">
				<button class="orders_btn">
					查看订单
				</button>
			</view>
			<view class="about">
				<button class="about_btn">
					关于我们
				</button>
			</view>
			<view class="history">
				<button class="history_btn">
					历史记录
				</button>
			</view>
			<view class="set">
				<button class="set_btn">
					设置
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import CustomNavBar from '@/components/common/CustomNavBar.vue'
	export default {
		data() {
			return {
				username: "用户测试1",
				individual: "Signature of the individual"
			}
		},
		methods: {
			handleSearchClick() {
				// 跳转到搜索页面
				uni.redirectTo({
					url: '/pages/search/search'
				});
			}
		},
		components: {
			CustomNavBar
		}
	}
</script>

<style scoped>
	.header {
		width: 750rpx;
		position: relative;
		display: flex;
		height: 16vh;
		margin-top: 20rpx;
		margin: 10rpx;
	}

	.header_left {
		flex-grow: 1.2;
		padding: 20rpx;
		display: inline-block;
	}

	.header_avatar {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-image: url(/static/images/衣服男4.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		border: 1rpx solid #d8d8d8;
	}

	.header_right {
		flex-grow: 1;
		display: block;
		padding-top: 40rpx;
	}

	.header_right text {
		display: block;
		margin: 10rpx;
	}

	.header_right button {
		background-color: transparent;
		margin: 0;
		padding: 0;
		Border: none;
		width: 220rpx;
		display: block;
		position: absolute;
		right: 0rpx;
		margin-right: 30rpx;
		font-size: 20rpx;
	}

	.mybody {
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;
	}

/* 	.mybody>* {
		flex: 1 1 calc(50% - 50rpx);
		margin: 20rpx;
	} */

	.orders,
	.about,
	.history,
	.set {
		flex: 1 1 calc(50% - 50rpx);
		margin: 20rpx;
	}

	.orders {}

	.orders_btn {}

	.about {}

	.about_btn {}

	.history {}

	.history_btn {}

	.set {}

	.set_btn {}
</style>